<template>
  <div id="root">
    <div class="title"><span>选择文字框</span></div>
    <div class="description">给你的画布加点字~</div>

    <div class="add-text-button" style="margin:0 auto;background-color:#F5C2CA;user-select:none" @click="addTextLayer">
      <span>点击添加文字框</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'bubbleBox',
  methods: {
    addTextLayer () {
      this.$store.state.canvasData.addLayer('text', '')
    }
  }
}
</script>

<style scoped>
#root {
  /* margin: 2px 0 0 2px; */
  /* border: 1px solid #d6d7de; */
  width: 23.86vw;
  height: 85vh;
}
.title {
  width: 18vw;
  height: 4.4vh;
  background-color: #f5c2ca;
  border-radius: 1vh;
  margin: 0 auto;
  margin-top: 3.15vh;
  display: flex;
  justify-content: center;
}
.title > span {
  align-self: center;
}
.description {
  text-align: center;
  font-size: 0.57vw;
  color: #767676;
}

.add-text-button {
  text-align: center;
  margin-top: 10vh;
  width: 10vw;
  font-size: 16px;
  border-radius: 5px;
}
</style>
